<template>
  <div class="box">
    <div class="header">
      <van-nav-bar left-arrow @click-left="onClickLeft" />
      <p>关注公众号领福利</p>
    </div>
    <div class="main">
      <p class="one">
        <van-icon name="down" size="21" />戳这里！关注公众号领福利！
      </p>
      <div class="two">
        <p class="pone">
          <span>mrwish平台服务号</span>
          <span>2022-06-29 17：50</span>
        </p>
        <span>发表于广东</span>
      </div>
      <div class="three">
        <p>千万年轻人都喜欢的公众号</p>
        <p>超多主题盲盒上新！最新资讯尽数掌握！</p>
        <p>扫码关注，看这里</p>
        <p>
          <van-icon name="down" size="16" />
          <van-icon name="down" size="16" />
          <van-icon name="down" size="16" />
        </p>
      </div>
      <div class="mainImg"></div>
    </div>
    <div class="footer">
      <van-icon name="arrow-left" class="c" />
      <van-icon name="arrow" class="c" />
    </div>
  </div>
</template>
<script>
export default {
  setup() {
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    };
  },
};
</script>
<style scoped>
.box {
  height: 667.2px;
  display: flex;
  flex-direction: column;
}
.header {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 100);
  position: relative;
}

.header p {
  width: 232px;
  height: 26px;
  color: rgba(16, 16, 16, 100);
  font-size: 18px;
  font-weight: 700;
  font-family: SourceHanSansSC-medium;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.main {
  flex: 1;
  /* background-color: blue; */
}
.one {
  color: rgba(16, 16, 16, 100);
  font-size: 20px;
  font-weight: 700;
  font-family: SourceHanSansSC-regular;
  text-align: center;
}
.two {
  margin-left: 20px;
}
.pone {
  color: rgba(154, 154, 154, 100);
  font-size: 14px;
  text-align: left;
}
.pone span:nth-child(1) {
  font-family: PingFangSC-regular;
}
.pone span:nth-child(2) {
  color: rgba(154, 154, 154, 100);
  font-size: 14px;
  font-family: PingFangSC-light;
  margin-left: 20px;
}
.two > span {
  color: rgba(190, 190, 190, 100);
  font-size: 14px;
  font-family: PingFangSC-regular;
}
.three p:nth-child(1) {
  font-weight: 700;
  color: rgba(16, 16, 16, 100);
  font-size: 18px;
  text-align: center;
  font-family: SourceHanSansSC-medium;
}
.three p:nth-child(2) {
  color: rgba(16, 16, 16, 100);
  font-size: 16px;
  text-align: center;
  font-family: PingFangSC-regular;
}
.three p:nth-child(3) {
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;
  font-family: PingFangSC-regular;
}
.three p:nth-child(4) {
  text-align: center;
}
.mainImg {
  width: 322px;
  height: 373px;
  background-color: #cecece;
  margin: auto;
  margin-top: 25px;
}
.footer {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: rgba(248, 248, 248, 100);
}
.footer .c {
  background-color: rgba(248, 248, 248, 100);
}
</style>
